<template>
  <div class="app-container">
    <div class="failt-box">
      <h1 class="title">{{ title }}</h1>
      <div class="item"
           v-for="(item, index) in newData"
           :key="index">
        <h1>{{ item.label }}</h1>

        <!-- 详细渲染 -->
        <ul v-if="item.english.toLowerCase() === 'details'">
          <div :class="{
              test: t.id && t.id.split((transformNum = t)),
              haveOpinin: t.comment,
            }"
               :data-index="t.id"
               v-for="(t, i) in contentList"
               :key="i">
            <template v-if="t.type == '1'">
              <Reader :obj="t"></Reader>
            </template>
            <template v-if="t.type == '2'">
              <p>
                <el-image style="width: 500px"
                          :src="t.url"
                          :preview-src-list="[t.url]">
                </el-image>
              </p>
            </template>
            <template v-if="t.type == '3'">
              <a :href="i.url">{{ t.content }}</a>
            </template>

            <div class="reason"
                 v-for="(o, index) in OpinionFnlist"
                 :key="index">
              <template v-if="o && t.id === o.endItemId">
                <div class="reason-item">
                  <div class="DefailReason">
                    <h2>失败原因</h2>
                    <span class="updateTime">更新时间{{ o.updatedTime }}</span>
                  </div>
                  <div class="DefailText">{{ o.opinion }}</div>
                </div>
              </template>
            </div>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// 头条的详细
import { getTopInfoApi } from "@/wss/api/doc/top.js";

// 模块分类
import {
  getDocModuleListApi,
  getDocModuleByTypeApi,
} from "@/wss/api/contentTemplate";
import Reader from "../../../../components/reader.vue";
const a = eval;
export default {
  dict: ['work:verifyOpinion:getByVerify'],
  props: {},
  components: { Reader },
  data () {
    return {
      title: "",
      haveOpininArr: [],
      contentList: [],
      OpinionFnlist: [],
      newData: [],
    };
  },
  methods: {
    // 获取详细信息
    async getTopInfoFn () {
      let { data, code } = await getTopInfoApi({ id: this.$route.query.id });
      if (code === 200) {
        this.title = data.title;
        this.contentList = data.info;
        console.log(this.contentList, "contentList");
      }
    },
    //  内容模版  list
    async getDocModuleListApiMet () {
      let result = await getDocModuleListApi();
      if (result.code == 200) {
        result.rows.forEach((item) => {
          item.type == "头条"
            ? (this.docModuleType = {
              type: item.type,
              no: item.no,
            })
            : "";
        });
      }
      this.getDocModuleByTypeApiMet(this.docModuleType);
    },
    // 去重复
    TorepeatFn (data) {
      this.haveOpininArr = [...new Set(data)];
      console.log(this.haveOpininArr, "去重复的数据");
    },
    //  内容模版  按类型查找
    async getDocModuleByTypeApiMet (type) {
      let { code, data } = await getDocModuleByTypeApi(type);
      console.log(data, "data----");
      if (code == 200) {
        // // 拼接内容模板的内容
        this.newData = data.map((item) => {
          return {
            label: item.module + "/" + item.english,
            english: item.english,
          };
        });
      }
      console.log("newData", data, this.newData);
    },
  },

  async mounted () {
    // 这里的await不可以去了，不然getOpinionFnlist里面endItemId为空时对不上🧨
    await this.getTopInfoFn();
    this.getDocModuleListApiMet();
    // 获取意见列表
    this.getOpinionFnlist(this, this.contentList);
  },
};
</script>

<style lang="scss"  scoped >
.app-container {
  background-color: #f0f0f1;
  .title {
    text-align: center;
    font-family: 'MicrosoftYaHei', 'Microsoft YaHei';
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #e37709;
  }
  .text {
    display: inline-block;

    margin: unset;
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    line-height: 20px;
    font-size: 14px;
  }

  .breadcrumbBox {
    height: 50px;
    background-color: #f5f5f5;
  }
  .tableBox {
    display: flex;
    height: 200px;
    justify-content: space-evenly;

    .item {
      text-align: center;
      width: 200px;
      border: 1px #cccc solid;
      height: 100%;
    }
    .item:nth-child(2),
    .item:nth-child(3) {
      flex: 10;
    }
    .content {
      font-size: 13px;
      font-weight: 900;
      color: #9999;
      height: 80%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .background {
    margin-top: 20px;
    margin-bottom: -4px;
    .background-content {
      padding-top: 30px;
      height: 100px;
    }
    .FailureReason {
      .title {
        display: flex;
        align-items: center;
        span {
          margin-left: 20px;
          font-size: 11px;
        }
      }
      background-color: #f5f5f5;
      padding: 10px;
      .content {
        font-size: 13px;
      }
      .footer {
        margin-top: 10px;
      }
    }
  }
  ul {
    padding: 0px;
    div {
      font-size: 16px;
    }
  }
  .lineItem {
    list-style: none;
    margin: 20px 0px;
    font-size: 12px;
    position: relative;
  }
  .selectItem {
    cursor: pointer;
    position: absolute;
    left: 0px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: black;
    height: 50px;
    width: 100px;
    text-align: center;
    line-height: 50px;
  }
  .div {
    margin: 10px 0px;
  }

  .el-row {
    margin-bottom: 20px;
    height: 100px;
    background-color: white;
  }
  .echoText {
    margin-top: 30px;
    background: #cccc;
    padding: 30px;
  }
  .submitPinion {
    font-weight: 400;
    font-size: 13px;
    height: 80px;
    color: white;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    background-color: black;
    position: absolute;
    width: 200px;
    z-index: 1000;
    line-height: 80px;
  }

  .DefailText {
    min-height: 50px;
  }
}
</style>